<template>
  <div id="app" :class="{'a':title}">
    <transition name="router-fade" mode="out-in">
      <router-view></router-view>
    </transition>
    <div id='rtt' class="ps-scroll-top">
      <svg class="icon icon-dingbu" aria-hidden="true">
        <use xlink:href="#icon-dingbu"></use>
      </svg>
    </div>
  </div>
</template>

<script>
  require('./util/dynamicEffect/scrollTop')
  require('./../static/flexible/flexible.js')
  import {setTitle} from './util/util'
  export default {
    name: 'app',
    computed: {
      title(){
        if (this.$route.query && this.$route.query.title) {
          setTitle(this.$route.query.title)
          return this.$route.query.title
        }else if (this.$route.meta.pageTitle) {
          setTitle(this.$route.meta.pageTitle)
          return this.$route.meta.pageTitle
        }
      }
    }
  }
</script>

<style lang="less">
  @import "./assets/css/utilities/position_base";
  @import "./assets/css/utilities/decorate_base";
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
  }
  //直达顶部
  .ps-scroll-top{
    .fixed(auto,10px,10px,auto,100000);
    width: 24px;
    text-align: center;
    height: 24px;
    line-height: 24px;
    .bor-radius(50%);
    background: #ddd;
  }
  .router-fade-enter-active, .router-fade-leave-active {
    transition: opacity .3s;
  }
  .router-fade-enter, .router-fade-leave-active {
    opacity: 0;
  }
</style>


